import React, { useEffect, useState } from "react";
import { Space, PopUp } from '@/components/UiComponents';
import { backgroundObj } from '@/utils/utils';
import { goodsType_status } from '@/common/contant'
import { View, Text } from '@tarojs/components'
import Tabs from '@/components/Tabs'
import "taro-ui/dist/style/components/float-layout.scss";
import Router from '@/utils/router'
import "./index.scss";
export default (props) => {
  const { show, onClose, list } = props;
  useEffect(() => {
    if (list.length > 0) {
      let newlist = list.reduce((item, val) => {
        const { packageGoodsType, packageGoodsInfo = '[]', chooseType, chooseAmount } = val
        setChooseData({
          ...chooseData,
          [packageGoodsType]: { chooseType, chooseAmount }
        })
        let listinfo = JSON.parse(packageGoodsInfo);
        return {
          ...item,
          [packageGoodsType]: listinfo
        }
      }, {})
      setData(newlist)
      setActiveKey(list[0].packageGoodsType)
      setTabList(list.map(item => {
        const { packageGoodsType } = item
        return {
          label: goodsType_status[packageGoodsType],
          value: packageGoodsType
        }
      }))

    }
  }, [list])
  const [data, setData] = useState({})
  const [tabList, setTabList] = useState([])
  const [activeKey, setActiveKey] = useState(null)
  const [chooseData, setChooseData] = useState({})
  const Card = (props) => {
    const { data } = props
    const { goodsName, price, cover, goodsId, goodsType } = data
    return <View className="contain_card_box" onClick={() => Router('shopDetail', { args: { goodsId: goodsId, goodsType } })
    }>
      <View className="contain_card_img" style={backgroundObj(cover)}></View>
      <View className="contain_card_body">
        <View className="contain_card_title">{goodsName}</View>
        <View className="contain_card_price">¥{price || 0}</View>
      </View>
    </View >
  }
  return (
    <PopUp visible={show} onClose={() => onClose()}>
      <View className="contain_box" onClick={(e) => { e.stopPropagation() }}>
        <View className="contain_title">套餐</View>
        <View className="contain_content">
          <View className="contain_price">
            <Space>
              <Text>总价 ：</Text>
              <Text>￥{data[activeKey]?.reduce((val, item) => {
                return val + Number(item.price || 0)
              }, 0)}</Text>
              <Text>实付 ：</Text>
              <Text>￥0.00</Text>
            </Space>
          </View>
          <Tabs list={tabList} onChange={(e) => { setActiveKey(e) }} activeKey={activeKey}>
          </Tabs>
          <Space style={{ width: '100%' }} direction='vertical'>
            {chooseData[activeKey] && <View className="contain_showCount">
              赠送商品数量:{chooseData[activeKey] ? chooseData[activeKey].chooseType === 'all' ? '全部' : `${data[activeKey].length}选${chooseData[activeKey].chooseAmount}` : null}
            </View>}
            {data[activeKey]?.map((item, index) => {
              return <Card data={item} key={index}></Card>
            })}
          </Space>
        </View>

      </View>
    </PopUp>
  );
};
